<template>
  <div class="data-sync-test">
    <div class="test-header">
      <h1>📊 数据联动测试页面</h1>
      <p>测试智慧课程管理与3D课堂的数据同步功能</p>
    </div>

    <div class="test-sections">
      <!-- 课程数据概览 -->
      <div class="test-section">
        <h2>📚 课程数据概览</h2>
        <div class="course-overview">
          <div class="overview-item">
            <span class="label">总课程数:</span>
            <span class="value">{{ allCourses.length }}</span>
          </div>
          <div class="overview-item">
            <span class="label">当前课程:</span>
            <span class="value">{{ currentCourse ? currentCourse.title : '未选择' }}</span>
          </div>
          <div class="overview-item">
            <span class="label">讲稿数量:</span>
            <span class="value">{{ currentCourse ? currentCourse.pptSlides.length : 0 }}</span>
          </div>
        </div>
      </div>

      <!-- 课程选择 -->
      <div class="test-section">
        <h2>🎯 课程选择</h2>
        <div class="course-selector">
          <select v-model="selectedCourseId" @change="loadCourse" class="course-select">
            <option value="">请选择课程</option>
            <option v-for="course in allCourses" :key="course.id" :value="course.id">
              {{ course.title }} ({{ course.pptSlides.length }}页讲稿)
            </option>
          </select>
          <button @click="refreshData" class="btn-refresh">🔄 刷新数据</button>
        </div>
      </div>

      <!-- PPT讲稿列表 -->
      <div class="test-section" v-if="currentCourse">
        <h2>📄 PPT讲稿列表</h2>
        <div class="slides-list">
          <div 
            v-for="(slide, index) in currentCourse.pptSlides" 
            :key="slide.id"
            class="slide-item"
          >
            <div class="slide-header">
              <span class="slide-number">{{ index + 1 }}</span>
              <span class="slide-title">{{ slide.title }}</span>
              <span class="slide-duration">{{ slide.displayDuration }}s</span>
            </div>
            <div class="slide-content">
              <p class="slide-script">{{ slide.script }}</p>
              <div class="slide-meta">
                <span class="slide-type">{{ slide.slideType }}</span>
                <span class="slide-camera">{{ slide.cameraShot }}</span>
                <span class="slide-voice">{{ slide.voiceType }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 3D课堂Slides -->
      <div class="test-section" v-if="classroomSlides.length > 0">
        <h2>🏫 3D课堂Slides</h2>
        <div class="classroom-slides">
          <div 
            v-for="(slide, index) in classroomSlides" 
            :key="slide.id"
            class="classroom-slide-item"
          >
            <div class="slide-header">
              <span class="slide-number">{{ index + 1 }}</span>
              <span class="slide-title">{{ slide.title }}</span>
            </div>
            <div class="slide-content" v-html="slide.content"></div>
            <div class="slide-meta">
              <span>语音: {{ slide.voiceScript.substring(0, 50) }}...</span>
              <span>时长: {{ slide.duration }}s</span>
              <span>镜头: {{ slide.cameraShot }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 数据操作测试 -->
      <div class="test-section">
        <h2>🧪 数据操作测试</h2>
        <div class="test-operations">
          <div class="operation-group">
            <h3>添加测试讲稿</h3>
            <div class="form-group">
              <input v-model="testSlide.title" placeholder="讲稿标题" class="form-input">
              <textarea v-model="testSlide.script" placeholder="讲稿内容" class="form-textarea"></textarea>
              <button @click="addTestSlide" class="btn-add" :disabled="!selectedCourseId">
                ➕ 添加讲稿
              </button>
            </div>
          </div>

          <div class="operation-group">
            <h3>更新讲稿测试</h3>
            <div class="form-group">
              <select v-model="selectedSlideId" class="form-select">
                <option value="">选择要更新的讲稿</option>
                <option v-for="slide in currentCourse?.pptSlides" :key="slide.id" :value="slide.id">
                  {{ slide.title }}
                </option>
              </select>
              <input v-model="updateData.title" placeholder="新标题" class="form-input">
              <textarea v-model="updateData.script" placeholder="新内容" class="form-textarea"></textarea>
              <button @click="updateTestSlide" class="btn-update" :disabled="!selectedSlideId">
                ✏️ 更新讲稿
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 事件日志 -->
      <div class="test-section">
        <h2>📋 事件日志</h2>
        <div class="event-log">
          <div 
            v-for="(event, index) in eventLog" 
            :key="index"
            class="log-item"
            :class="event.type"
          >
            <span class="log-time">{{ event.time }}</span>
            <span class="log-event">{{ event.event }}</span>
            <span class="log-data">{{ event.data }}</span>
          </div>
        </div>
        <button @click="clearLog" class="btn-clear">🗑️ 清空日志</button>
      </div>
    </div>
  </div>
</template>

<script>
import courseDataManager from '@/utils/courseDataManager'

export default {
  name: 'DataSyncTest',
  data() {
    return {
      selectedCourseId: '',
      selectedSlideId: '',
      currentCourse: null,
      allCourses: [],
      classroomSlides: [],
      eventLog: [],
      testSlide: {
        title: '测试讲稿',
        script: '这是一个测试讲稿内容，用于验证数据同步功能。'
      },
      updateData: {
        title: '',
        script: ''
      }
    }
  },
  
  mounted() {
    this.loadAllCourses()
    this.setupDataListener()
    this.addLog('info', '页面初始化', '数据联动测试页面已加载')
  },
  
  beforeDestroy() {
    if (this.dataListener) {
      courseDataManager.removeListener(this.dataListener)
    }
  },
  
  methods: {
    // 加载所有课程
    loadAllCourses() {
      this.allCourses = courseDataManager.getAllCourses()
      this.addLog('info', '数据加载', `加载了 ${this.allCourses.length} 个课程`)
    },
    
    // 加载指定课程
    loadCourse() {
      if (this.selectedCourseId) {
        this.currentCourse = courseDataManager.getCourse(this.selectedCourseId)
        this.classroomSlides = courseDataManager.getCourseClassroomSlides(this.selectedCourseId)
        this.addLog('success', '课程切换', `切换到课程: ${this.currentCourse.title}`)
      } else {
        this.currentCourse = null
        this.classroomSlides = []
      }
    },
    
    // 刷新数据
    refreshData() {
      this.loadAllCourses()
      if (this.selectedCourseId) {
        this.loadCourse()
      }
      this.addLog('info', '数据刷新', '所有数据已刷新')
    },
    
    // 设置数据监听器
    setupDataListener() {
      this.dataListener = (event, data) => {
        this.addLog('warning', '数据变更', `${event}: ${JSON.stringify(data)}`)
        
        // 如果是当前课程的变更，刷新显示
        if (data.courseId === this.selectedCourseId) {
          this.loadCourse()
        }
      }
      courseDataManager.addListener(this.dataListener)
    },
    
    // 添加测试讲稿
    addTestSlide() {
      if (!this.selectedCourseId || !this.testSlide.title.trim()) {
        alert('请选择课程并输入讲稿标题')
        return
      }
      
      const slideData = {
        title: this.testSlide.title,
        script: this.testSlide.script,
        slideType: 'ppt',
        displayDuration: 30,
        keywords: '测试,数据同步',
        voiceType: 'female-professional'
      }
      
      const slideId = courseDataManager.addPPTSlide(this.selectedCourseId, slideData)
      if (slideId) {
        this.addLog('success', '讲稿添加', `成功添加讲稿: ${this.testSlide.title}`)
        this.testSlide.title = '测试讲稿'
        this.testSlide.script = '这是一个测试讲稿内容，用于验证数据同步功能。'
      } else {
        this.addLog('error', '添加失败', '讲稿添加失败')
      }
    },
    
    // 更新测试讲稿
    updateTestSlide() {
      if (!this.selectedSlideId || !this.updateData.title.trim()) {
        alert('请选择讲稿并输入新标题')
        return
      }
      
      const success = courseDataManager.updatePPTSlide(this.selectedCourseId, this.selectedSlideId, {
        title: this.updateData.title,
        script: this.updateData.script,
        keywords: '更新,测试,数据同步'
      })
      
      if (success) {
        this.addLog('success', '讲稿更新', `成功更新讲稿: ${this.updateData.title}`)
        this.updateData.title = ''
        this.updateData.script = ''
        this.selectedSlideId = ''
      } else {
        this.addLog('error', '更新失败', '讲稿更新失败')
      }
    },
    
    // 添加日志
    addLog(type, event, data) {
      this.eventLog.unshift({
        type,
        event,
        data,
        time: new Date().toLocaleTimeString()
      })
      
      // 限制日志数量
      if (this.eventLog.length > 50) {
        this.eventLog = this.eventLog.slice(0, 50)
      }
    },
    
    // 清空日志
    clearLog() {
      this.eventLog = []
    }
  }
}
</script>

<style scoped lang="scss">
.data-sync-test {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.test-header {
  text-align: center;
  margin-bottom: 30px;
  
  h1 {
    color: #2c3e50;
    margin-bottom: 10px;
  }
  
  p {
    color: #7f8c8d;
    font-size: 16px;
  }
}

.test-sections {
  display: grid;
  gap: 20px;
}

.test-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  h2 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 18px;
  }
  
  h3 {
    color: #34495e;
    margin-bottom: 10px;
    font-size: 16px;
  }
}

.course-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  
  .overview-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 8px;
    
    .label {
      font-weight: 500;
      color: #495057;
    }
    
    .value {
      font-weight: bold;
      color: #667eea;
    }
  }
}

.course-selector {
  display: flex;
  gap: 10px;
  align-items: center;
  
  .course-select {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
  }
  
  .btn-refresh {
    padding: 10px 15px;
    background: #17a2b8;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    
    &:hover {
      background: #138496;
    }
  }
}

.slides-list, .classroom-slides {
  display: grid;
  gap: 15px;
}

.slide-item, .classroom-slide-item {
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  padding: 15px;
  
  .slide-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    
    .slide-number {
      background: #667eea;
      color: white;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
    }
    
    .slide-title {
      font-weight: 600;
      color: #2c3e50;
      flex: 1;
    }
    
    .slide-duration {
      background: #28a745;
      color: white;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 12px;
    }
  }
  
  .slide-content {
    margin-bottom: 10px;
    
    .slide-script {
      color: #495057;
      line-height: 1.5;
      margin-bottom: 10px;
    }
  }
  
  .slide-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    
    span {
      background: #f8f9fa;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      color: #6c757d;
    }
  }
}

.test-operations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.operation-group {
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  padding: 15px;
}

.form-group {
  display: grid;
  gap: 10px;
}

.form-input, .form-select, .form-textarea {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  
  &:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 5px rgba(102, 126, 234, 0.3);
  }
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.btn-add, .btn-update, .btn-clear {
  padding: 10px 15px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.btn-add {
  background: #28a745;
  color: white;
  
  &:hover:not(:disabled) {
    background: #218838;
  }
}

.btn-update {
  background: #ffc107;
  color: #212529;
  
  &:hover:not(:disabled) {
    background: #e0a800;
  }
}

.btn-clear {
  background: #dc3545;
  color: white;
  
  &:hover {
    background: #c82333;
  }
}

.event-log {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  margin-bottom: 10px;
}

.log-item {
  display: grid;
  grid-template-columns: 80px 120px 1fr;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid #f1f3f4;
  font-size: 12px;
  
  &:last-child {
    border-bottom: none;
  }
  
  &.info {
    background: #f8f9fa;
  }
  
  &.success {
    background: #d4edda;
  }
  
  &.warning {
    background: #fff3cd;
  }
  
  &.error {
    background: #f8d7da;
  }
  
  .log-time {
    color: #6c757d;
    font-weight: 500;
  }
  
  .log-event {
    color: #495057;
    font-weight: 600;
  }
  
  .log-data {
    color: #6c757d;
    word-break: break-all;
  }
}

@media (max-width: 768px) {
  .course-selector {
    flex-direction: column;
    align-items: stretch;
  }
  
  .test-operations {
    grid-template-columns: 1fr;
  }
  
  .log-item {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
</style> 